<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件节流</title>
</head>

<body>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <p>hello world</p>
  <script src="./node_modules/lodash/lodash.js"></script>
  <script>
    // document.onscroll = function () {
    //   console.log('hello')
    // }

    // 参数1：函数
    // 参数2：时间
    // 返回值：被节流的函数
    // document.onscroll = _.throttle(function () {
    //   console.log('hello')
    // }, 1000)

    function throttle(fn, delay) {
      let lastTime
      let timer
      delay || (delay = 300) // 默认间隔为300ms
      return function (arguments) {
        let context = this
        let args = arguments
        let nowTime = +new Date() // 获取系统当前的时间
        if (lastTime && nowTime < lastTime + delay) {
          // 当前距离上次执行的时间小于设置的时间间隔
          clearTimeout(timer) // 清除定时器
          timer = setTimeout(function () {
            // delay时间后，执行函数
            lastTime = nowTime
            fn.apply(context, args)
          }, delay)
        } else {
          // 当前距离上次执行的时间大于等于设置的时间，直接执行函数
          lastTime = nowTime
          fn.apply(context, args)
        }
      }
    }


  </script>
</body>

</html>
